<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>资产详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <style>
        table {
            table-layout: fixed;
        }

        table td.remark {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        table td, table th {
            text-align: center !important;
        }

        .layui-laypage button {
            background: #009688;
            color: white;
            border: 1px #009688 solid;
            border-radius: 3px;
        }
    </style>
</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a href="">账户总览</a>
        <a>
          <cite>支付方式</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.reload();" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" placeholder="姓名" id="realname" autocomplete="off" class="layui-input">
            <input type="text" placeholder="支付方式" id="payway" autocomplete="off" class="layui-input">
            <button class="layui-btn" type="button" lay-submit="" lay-filter="sreach" onclick="getBills()">
                <i class="layui-icon">&#xe615;</i>搜索
            </button>
            <button class="layui-btn layui-btn-primary" type="reset">
                <i class="layui-icon">&#xe640;</i>重置
            </button>
        </form>
    </div>
    <button class="layui-btn" onclick="x_admin_show('新增资产','asset_addPayway.html','460px','80%')"><i class="layui-icon"></i>添加
        <xblock>
    </button>
    <span class="x-right" style="line-height:40px">共有数据：<span id="num"></span> 条</span>
    </xblock>
    <table class="layui-table" id="bills">
        <thead>
        <tr>
            <th style="width: 6%;">序号</th>
            <th style="width: 15%;">支付方式</th>
            <th style="width: 10%;">备注</th>
            <!--<th>备注</th>-->
            <th style="width: 10%;">操作</th>
        </thead>
        <tbody></tbody>
    </table>

    <!--<div id="barDemo">-->
    <!--<a title="编辑" onclick="x_admin_show('编辑','income_add.html?index=' + (index + 1) + '#2','460px','80%')" href="javascript:;">-->
    <!--<i class="layui-icon">&#xe642;</i>-->
    <!--</a>-->
    <!--<a title="删除" onclick="del(this,' + item.id + ')" href="javascript:;">-->
    <!--<i class="layui-icon">&#xe640;</i>-->
    <!--</a>-->
    <!--</div>-->

    <div id="pager" style="text-align: center;"></div>

</div>
<script>
    getAllPayways();
    mPageSize = 10;
    $(function () {
        layer = layui.layer;
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#start', //指定元素
                max: 0
            });
            laydate.render({
                elem: '#end', //指定元素
                max: 0
            });
        });
        getBills();
    });


    function getBills(pageNo) {
        pageNo = pageNo || 1;
        var bill = {
            "realname": $("#realname").val(),
            "name": $("#name").val()
        }
        // console.log(bill);
        $.post("/payway/getBillsByWhere/" + pageNo + "/" + mPageSize, bill, function (res) {
            // console.log(res);
            if (res.code == 200) {
                if (res.total == 0) {
                    layer.msg(res.msg);
                }
                $("#num").text(res.total);
                fillTable(res.datas, (pageNo - 1) * mPageSize);
                layui.use('laypage', function () {
                    var laypage = layui.laypage;

                    //执行一个laypage实例
                    laypage.render({
                        elem: 'pager', //注意，这里的 test1 是 ID，不用加 # 号
                        count: res.total, //数据总数，从服务端得到
                        limit: mPageSize,
                        curr: pageNo,
                        prev: "<",
                        next: ">",
                        groups: 2,
                        limits: [10, 30, 50, 100],
                        layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                        skip: true, //是否开启跳页
                        jump: function (obj, isfirst) {
                            if (!isfirst) {
                                mPageSize = obj.limit;
                                getBills(obj.curr, obj.limit)
                            }
                        }
                    });
                });
            } else {
                layer.msg(res.msg);
            }
        });
    }

    function fillTable(bills, beginIndex) {
        var html = "";
        $.each(bills, function (index, item) {
            html += '<tr>' +
                '            <td>' + (index + 1 + beginIndex) + '</td>' +
                '            <td>' + item.realname + '</td>' +
                '            <td>' + item.payway + '</td>' +
                '            <td class="extra" title=' + item.extra + '>' + item.extra + '</td>' +
                '            <td style="display: none">' + item.id + '</td>' +
                '            <td class="td-manage">' +
                '                <a title="编辑" onclick="x_admin_show(\'编辑\',\'asset_addAccount.html?index=' + (index + 1) + '#2\',\'460px\',\'80%\')" href="javascript:;">' +
                '                    <i class="layui-icon">&#xe642;</i>' +
                '                </a>' +
                '                <a title="删除" onclick="del(this,' + item.id + ')" href="javascript:;">' +
                '                    <i class="layui-icon">&#xe640;</i>' +
                '                </a>' +
                '            </td>'
            '        </tr>';
        })
        $("#bills tbody").html(html);
    }

    /*删除*/
    function del(obj, id) {
        layer.confirm('确认要删除吗？', {title: false, closeBtn: false, skin: 'layui-layer-molv'}, function (index) {
            var data = {"id": id}
            $.post("/payway/delBill", data, function (res) {
                if (res.code == 200) {
                    getBills();
                    layer.msg('删除成功!', {icon: 1, time: 1000});
                } else {
                    layer.msg("删除失败！", {icon: 2, time: 1000});
                }
            });

        });
    }
</script>
</body>

</html>
